﻿@model smp.ButterflyCakes.Models.FormModels.Order.ComponentButterCreamModel
<div class="container">
    <div class="container-fluid">
        @if (ViewBag.Error != null)
        {
            <div class="alert alert-block alert-error">
                <p>@ViewBag.Error</p>
            </div>
        }
        @Html.ValidationSummary(true)
    </div>
    <div class="form-actions">
        @if (Model.IsButterCreamValid)
        {
            <div class="row-fluid">
                <label class="radio buttercream">
                    <input type="radio" name="Buttercream" id="Buttercream" target="buttercream" value="true" />
                    Do you want buttercream
                </label>
            </div>
            if (Model.IsGanacheValid)
            {
            <div class="row-fluid">
                <strong>Or</strong>
            </div>
            }
        }
        @if (Model.IsGanacheValid)
        {
            <div class="row-fluid">
                <label class="radio buttercream">
                    <input type="radio" name="Buttercream" id="Buttercream" target="ganache" value="true" />
                    Do you want Ganache
                </label>
            </div>
        }
        @if (!Model.IsButterCreamValid && !Model.IsGanacheValid)
        {
            <strong>No compatible fillings</strong>
        }
    </div>
    <form class="form-horizontal" id="editform" url="/order/SaveButterCream">
    @Html.HiddenFor(x => x.OrderId)
    @Html.HiddenFor(x => x.ComponentId)
    <div id="buttercreamflavoursContainer" class="control-group hide">
        <label class="control-label" for="ButterCreamId">
            Select flavour</label>
        <div class="controls">
            @MvcHtmlString.Create(Model.SelectButterCream.Html)
        </div>
    </div>
    <div id="ganacheflavoursContainer" class="control-group hide">
        <label class="control-label" for="GanacheId">
            Select flavour</label>
        <div class="controls">
            @MvcHtmlString.Create(Model.SelectGanache.Html)
        </div>
    </div>
    <div id="buttercreamColourContainer" class="control-group hide">
        <label class="control-label" for="ButterCreamId">
            Colour</label>
        <div class="controls">
            @Html.HiddenFor(x => x.ButterCreamColour)
            <div>
                <div id="selectedColour" style="height: 50px; width: 200px; background: @Model.ButterCreamColour">
                    <p id="noColour">
                        None</p>
                </div>
                <a id="pickColour" type="button" class="btn btn-info">
                    Toggle Colour Wheel</a>
            </div>
            <div id="colourPickerContainer" class="hide">
            </div>
        </div>
    </div>
    </form>
    <div class="form-actions">
        <button id="save" type="submit" class="btn btn-success">
            Next
        </button>
        <button id="cancel" type="submit" class="btn btn-danger hide">
            Cancel
        </button>
    </div>
</div>
<script type="text/javascript">

    var wheelActive = false;

    function LoadColourPick() {
        var cw = Raphael.colorwheel($('#colourPickerContainer'), 250);
        if ($('#ButterCreamColour').val() != NaN) {
            cw.color($('#colourPickerContainer').val());
        }
        cw.onchange(function (colour) {
            $('#selectedColour').css('background', colour.hex);
            $('#ButterCreamColour').val(colour.hex);
            $('#noColour').text('');
        });
    }

    $(document).ready(function () {

        $('.buttercream').click(function () {
            if ($(this).find(">:first-child").attr('target') == "buttercream") {
                $('#ganacheflavoursContainer').slideUp(250, function () {
                    $('#buttercreamflavoursContainer').slideDown(500);
                    $('#buttercreamColourContainer').slideDown(500);
                });
            } else if ($(this).find(">:first-child").attr('target') == "ganache") {
                $('#buttercreamflavoursContainer').slideUp(250, function () {
                    $('#SelectColourContainer').slideUp(250, function () {
                        $('#ganacheflavoursContainer').slideDown(500);
                    });
                });
            }
        });

        $('#pickColour').click(function (e) {
            e.preventDefault();
            if (wheelActive) {
                $('#colourPickerContainer').slideUp(250);
                wheelActive = false;
            } else {
                $('#colourPickerContainer').slideDown(500);
                wheelActive = true;
            }
        });

        LoadColourPick();

        if ($('#ButterCreamColour').val() != '') {
            $('#noColour').text('');
        }
    });
</script>
